<template>
	<view class="detail">
		<view class="detail-remind">
			<text class="detail-remind-text">已发货</text>
			<text>我们会尽快处理您的订单</text>
		</view>
		<view class="card detail-receiving">
			<view class="card-header detail-receiving-text">
				<u-icon name="order" size="28"></u-icon>收货信息
			</view>
			<view class="card-body detail-receiving-user">
				<view class="detail-receiving-row">
					<text class="detail-receiving-name">吴君</text>
					<text>123445</text>
				</view>
				<text>我是地址</text>
			</view>
		</view>
		<view class="card detail-logistics">
			<view class="card-header">
				<u-icon name="car-fill" size="28"></u-icon>物流信息
			</view>
			<view class="card-body">
				<text class="font">暂无</text>
			</view>
		</view>
		<view class=" card detail-goods">
			<view class="card-header">商品信息</view>
			<view class="card-body">
				<view class="body">
					<view class="img">
						<image
							src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F30%2F20200330155010_UVmvd.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635333980&t=18673a9535d5f9287a1abfe6e0afb209"
							mode="widthFix"></image>
					</view>
					<view class="right">
						<view class="row">
							<text>[抽盒]</text>
							<text class="detail-receiving-name">￥19</text>
						</view>
						<view class="row">
							<text class="detail-receiving-name">夏日宝宝</text>
							<text>x1</text>
						</view>
					</view>
				</view>
				<view class="list">
					<view class="list-item">
						<text class="item-label">订单编号：</text>
						<text class="item-text">1937838929273973</text>
					</view>
					<view class="list-item">
						<text class="item-label">大盒编号：</text>
						<text class="item-text">1937838929</text>
					</view>
					<view class="list-item">
						<text class="item-label">小盒位置：</text>
						<text class="item-text">1</text>
					</view>
					<view class="list-item">
						<text class="item-label">下单时间：</text>
						<text class="item-text">2021-09-27 15:20</text>
					</view>
					<view class="list-item">
						<text class="item-label">付款时间：</text>
						<text class="item-text">2021-09-27 15:20</text>
					</view>

				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.detail {
		height: 100vh;
		background-color: #f4f5f8;

		.detail-remind {
			display: flex;
			flex-flow: column;
			align-items: center;
			background-color: #F29100;
			padding: 30rpx 0;

			.detail-remind-text {
				font-size: 32rpx;
				font-weight: bold;
				margin: 0 0 20rpx;
			}

		}

		.detail-receiving {

			// margin: 20rpx 20rpx;
			// background-color: #FFFFFF;
			// border-radius: 16rpx;
			.detail-receiving-text {
				// padding: 20rpx 20rpx;

			}

			.detail-receiving-user {
				// padding: 20rpx 20rpx;
				// border-top: 1rpx solid #DCDFE6;
			}

			.detail-receiving-row {
				margin-bottom: 20rpx;
			}

			.detail-receiving-name {
				font-weight: bold;
			}
		}

		.card {
			margin: 20rpx 20rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;

			.card-header {
				padding: 20rpx 20rpx;

			}

			.card-body {
				padding: 20rpx 20rpx;
				border-top: 1rpx solid #DCDFE6;
			}
		}

		.detail-logistics {
			.font {
				font-size: 35rpx;
				font-weight: bold;
				display: flex;
				flex-flow: column;
				align-items: center;
				padding: 30rpx 0;
			}
		}

		.detail-goods {
			.body {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				//border-top: 1rpx solid #DCDFE6;
				// border-bottom: 1rpx solid #C8C7CC;

				/* &::after{
				content: '';
				position: absolute;
				left: 20rpx;
				right: 20rpx;
				bottom: 0;
				height: 1rpx;
				background-color: #DCDFE6;
			} */

				.right {
					flex: 1;
					margin-left: 20rpx;
				}

				.row {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.detail-receiving-name {
						font-size: 36rpx;
						font-weight: bold;
					}
				}

				padding: 20rpx;

				.img {
					height: 100rpx;
					width: 100rpx;

					image {
						height: 100rpx;
						width: 100rpx;
					}
				}
			}

			.list {
				margin: 20rpx 0 0 0;

				.list-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 20rpx 0;

					.item-label {
						color: #999999;
					}

					.item-text {
						flex: 1;
						margin-left: 20rpx;
						font-weight: bold;
					}

				}
			}
		}

	}
</style>
